<template>
  <div class="block-weacher">
    <!-- 上边标题 -->
    <div class="weacher-title">
      <Title ids="#icon-tianqi-" message="今日天气"></Title>
    </div>
    <!-- 天气内容展示 -->
    <div class="weacher-content">
      <div class="item-info">
        <!-- 第一层 -->
        <div class="info-one">
          <div>
            <div class="address-info">{{ weacherInfo.city}}</div>
            <div class="address-seacher">
              <el-cascader
                :options="options"
                v-model="value"
                @change="handleChange"
                :show-all-levels="false"
              ></el-cascader>
            </div>
          </div>
        </div>
        <!-- 第二层 -->
        <div class="info-two">
          <div class="wv">
            <div class="wv-one">
              <div class="weacher-icon">
                <span>

                    <Svgs v-if="duoyun(weacherInfo.yesterday.type)" style="font-size: 45px" ids="#icon-duoyun"></Svgs>
                    <Svgs v-if="qing(weacherInfo.yesterday.type)" style="font-size: 45px" ids="#icon-tianqitubiao_qing"></Svgs>
                    <Svgs v-if="yintian(weacherInfo.yesterday.type)" style="font-size: 45px" ids="#icon-icon_yintian"></Svgs>
                    <Svgs v-if="dayu(weacherInfo.yesterday.type)" style="font-size: 45px" ids="#icon-icon_dayu"></Svgs>
                    <Svgs v-if="baoyu(weacherInfo.yesterday.type)" style="font-size: 45px" ids="#icon-icon_baoyu"></Svgs>
                </span>
              </div>
              <div class="weacher-wendu">
                <h2 style="font-weight: 400">{{weacherInfo.wendu}}℃</h2>
                <h5 style="font-weight: 400">{{weacherInfo.yesterday.type}}</h5>
              </div>
              <div class="weacher-feng" style="width: 50%; position: relative">
                <span style="position: absolute; right: 8px; bottom: 15px">
                  {{weacherInfo.yesterday.fengxiang}}
                </span>
              </div>
            </div>
            <div class="wv-two">
              <span style="font-size: 12px; color: #fff;margin-left:3px"
                >{{weacherInfo.ganmao}}</span
              >
            </div>
          </div>
        </div>
        <div class="info-three"></div>
        <div class="info-four">
            <div class="bottom-info">
                <ul class="wv-ul" v-for="(item,index) in weacherInfo.forecast" :key="index">
                    <li class="wv-li one">
                     <span>{{ item.date.slice(item.date.length-3)}}</span>
                    </li>
                    <li class="wv-li two">
                        <span>
                              <Svgs v-if="duoyun(item.type)" style="font-size: 20px" ids="#icon-duoyun"></Svgs>
                              <Svgs v-if="qing(item.type)" style="font-size: 20px" ids="#icon-tianqitubiao_qing"></Svgs>
                              <Svgs v-if="yintian(item.type)" style="font-size: 20px" ids="#icon-icon_yintian"></Svgs>
                              <Svgs v-if="dayu(item.type)" style="font-size: 20px" ids="#icon-icon_dayu"></Svgs>
                              <Svgs v-if="baoyu(item.type)" style="font-size: 20px" ids="#icon-icon_baoyu"></Svgs>
                              
                        </span>
                    </li>
                    <li class="wv-li three">
                        <h6>{{item.low.slice(2)}}/{{item.high.slice(2)}}</h6>
                        <h6>{{item.fengxiang}}</h6>
                    </li>
                </ul>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Svgs from "../svg/svg.vue";
import Title from '../title/title.vue'
import pubsub from 'pubsub-js';
export default {
  name: "Weather",
  components: {
    Svgs,
    Title
  }
  ,
  data() {
    return {
      value: "", //初始化
      options: [], //地区级联信息
      weacherInfo: {//天气信息  
          city:"",
          forecast:[],
          yesterday:{},
          wendu:'',
          ganmao:"",
          
      },
    };
  },
  mounted() {
    // 为给定 ID 的 user 创建请求
    this.selectAddress()
    this.selectWeacher()


    //获取用户地址
    this.getUserAddress()
  },
  methods: {
    qing(item){
        if(typeof item != "undefined"){
      if(JSON.stringify(item).indexOf('晴') != -1){
        return true;
      }
        }
      return false
    },
    duoyun(item){

        if(typeof item != "undefined"){
           if(JSON.stringify(item).indexOf('多云') != -1){
          return true;
        }
        }
       
      return false;
    },
    yintian(item){
        if(typeof item != "undefined"){
        if(JSON.stringify(item).indexOf('阴') != -1){
        return true;
      }
        }
   
     return false;
    },
    dayu(item){
        if(typeof item != "undefined"){
         if(JSON.stringify(item).indexOf('雨') != -1){
        return true;
      }
        }
      return false;
    },
    baoyu(item){
        if(typeof item != "undefined"){
         if(JSON.stringify(item).indexOf('暴') != -1){
        return true;
      }
        }
      return false;
    },
    //获取用户地址
    getUserAddress(){
      const userinfo = this.$store.state.userInfo;
      if(userinfo == "" || userinfo == null || typeof userinfo == "undefined"){
           this.init("北京")
      }else{
          //判断是否修改地址 true则通知天气系统查询信息
          if(userinfo.userAddress=="" || userinfo.userAddress==null||typeof userinfo.userAddress=="undefined"){
                //通知天气查询信息
                pubsub.publish("selectWeachers","北京")
          }else{
                //通知天气查询信息
              const addres = userinfo.userAddress;
              //按照，拆分
              var caiadd = addres.split(",");
              //获取最终地区名
              var endAddress = caiadd[2].substring(0,caiadd[2].length-1)
               this.init(endAddress)
          }
      }
    },
    // 创建查询天气方法
    selectWeacher(){
        pubsub.subscribe("selectWeachers",(item,data)=>{
          this.init(data)
        })
    },
    selectAddress(){
          const that = this;
    axios.get("/aabbcc/test/address").then(function (response) {
      that.options = response.data;
      
    });
    },
    handleChange() {
      // 为给定 ID 的 user 创建请求
      const that = this;
      //  http://wthrcdn.etouch.cn/weather_mini?city=成都
      axios
        .get("http://wthrcdn.etouch.cn/weather_mini?city=" + that.value[2])
        .then(function (response) {
           
          that.weacherInfo.city = response.data.data.city;
          for(var i = 0;i<3;i++){
              that.weacherInfo.forecast[i] = response.data.data.forecast[i]
          }
          that.weacherInfo.ganmao = response.data.data.ganmao
          that.weacherInfo.yesterday=response.data.data.forecast[0]
          that.weacherInfo.wendu=response.data.data.wendu

        });
    },
      init(value) {
      // 为给定 ID 的 user 创建请求
      const that = this;
      //  http://wthrcdn.etouch.cn/weather_mini?city=成都
      var url = "http://wthrcdn.etouch.cn/weather_mini?city="+value.trim()
      axios
        .get(url)
        .then(function (response) {
          that.weacherInfo.city = response.data.data.city;
          for(var i = 0;i<3;i++){
              that.weacherInfo.forecast[i] = response.data.data.forecast[i]
          }
          that.weacherInfo.ganmao = response.data.data.ganmao
          that.weacherInfo.yesterday=response.data.data.forecast[0]
             that.weacherInfo.wendu=response.data.data.wendu
        });
    },
   
  },
};
</script>

<style scoped>
/* 天气内容 */
.weacher-content {
  width: 100%;
  height: 320px;
  /* border: 1px solid red; */
}
.weacher-content .item-info {
  width: 90%;
  height: 95%;
  background-color: #313a44;
  margin: 0 auto;
  margin-top: 15px;
  border-radius: 10px;
}
/* 第一层 */
.item-info .info-one {
  width: 100%;
  height: 16%;
  position: relative;
}
.item-info .info-one > div {
  display: flex;
  justify-content: left;
  position: relative;
  top: 8px;
  left: 9px;
}
.item-info .info-one > div .address-info {
  color: #fff;
}
.item-info .info-one > div .address-seacher {
      position: absolute;
    margin-top: -8px;
    right: 9px;
}
/* 第二层 */
.item-info .info-two {
  width: 100%;
  height: 40%;
  position: relative;
}
.info-two .wv {
  width: 95%;
  height: 100%;
  margin: 0 auto;
}
.info-two .wv .wv-one {
  width: 100%;
  height: 53%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  color: #fff;
  margin-top: 8px;
}
.info-two .wv .wv-two {
  width: 100%;
  height: 30%;
  margin: 0 auto;
}

.item-info .info-three {
  width:90%;
  height: 1px;
  background-color: #757677;
  margin:0 auto;
}
/* 第四层 */
.item-info .info-four {
  width: 100%;
  height: 42%;
}
.info-four .bottom-info{
        width: 95%;
    height: 75%;
    margin: 0 auto;
    margin-top: 20px;
     display: flex;
}
.bottom-info .wv-ul{
    width: 26%;
    height: 100%;
    margin-left: 15px;
    color: #fff;
    text-align: center;
   
}
.bottom-info .wv-ul .one{
    font-size: 14px;
}
.bottom-info .wv-ul .two{
    margin-top: 8px;
}
.bottom-info .wv-ul .three{
  margin-top: 10px;
}
.bottom-info .wv-ul .three>h6{
    font-weight: 400;
     font-size: 12px;
}



.block-weacher {
  width: 100%;
  height: 100%;
  /* background-color: blueviolet; */
  border-radius: 10px;
  background: #fff;
}
/* 上边标题 */
.block-weacher .weacher-title {
  width: 100%;
  height: 47px;
  border-bottom: 1px solid #ebeef5;
  position: relative;
}

</style>